<template>
  <!-- 客户管理 -->
  <div class="customer_management">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="客户列表信息"
      left-arrow
      @click-left="$router.go(-1)"
      right-text="新增"
      @click-right="$router.push('/newCustomer')"
    />
    <!-- 搜索 -->
    <van-search
      v-model="Value"
      action-text="搜索"
      shape="round"
      show-action
      placeholder="关键字查询"
    />

    <!-- 客户列表 -->
    <van-card
      v-for="e in records"
      :key="e.id"
      :desc="'联系方式:  ' + e.telephone"
      :title="'客户名称:  ' + e.custName"
    >
      <template #tags>
        <div>
          公司名称: <span> {{ e.company }}</span>
        </div>
        <div>职务: <span> 办公室主任</span></div>
      </template>
      <template #footer>
        <van-button color="#039" round>新增拜访</van-button>
        <van-button
          color="#039"
          round
          @click="
            $router.push({
              path: '/client',
              query: { info: JSON.stringify(e.id) },
            })
          "
          >拜访记录</van-button
        >
      </template>
    </van-card>

    <!-- 分页 -->
    <van-pagination
      v-model="feny.current"
      :page-count="feny.pages"
      mode="multi"
      :show-page-size="0"
      @change="changePage"
    />
  </div>
</template>

<script>
import { GetClientList } from "@/request/api";
export default {
  data() {
    return {
      Value: "",

      // 客户列表
      records: [],

      // 分页
      feny: [],
    };
  },
  created() {
    GetClientList({ keyword: "", current: 1, size: 10 }).then((res) => {
      // console.log(res.data);
      this.records = res.data.records;
      this.feny = res.data;
    });
  },
  methods: {
    changePage() {
      GetClientList({ keyword: "", current: this.feny.current, size: 10 }).then(
        (res) => {
          this.records = res.data.records;
        }
      );
    },
  },
};
</script>
 
<style lang = "less" scoped>
.customer_management {
  /* 顶部导航 */
  .van-hairline--bottom {
    background-color: #003399;
  }
  /deep/.van-nav-bar__title,
  /deep/.van-icon,
  /deep/.van-nav-bar__text {
    color: #ffffff;
  }
  .van-search__action {
    color: #039;
  }

  /* 客户信息列表 */
  .van-card__header {
    border-bottom: 1px solid #ccc;
  }
  .van-card__footer {
    padding-top: 0.1rem;
  }
  .van-button {
    height: 0.3rem;
  }
  .van-card__content {
    line-height: 0.2rem;
  }
  .van-card {
    margin-top: 0.1rem;
  }
}
</style>